<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p class="p">这是about的p</p>
    <div class="box">about的文字</div>
    <ul>
      <li v-for="(val,idx) in array" :key="val.id">
        <span>{{val.title}}</span>
        <ul>
          <li v-for="val2 in val.items" :key="val2">{{val2}}</li>
        </ul>
      </li>
    </ul>
    <input type="button" value="修改数据" @click=" array.shift() ">
  </div>
</template>

<style>
</style>

<script>
export default {
  data() {
    return {
      array: [{
        id:"ansfgdft",
        title:"大菜",
        items:["红烧肉","糖醋排骨","麻辣鱼头"]
      },{
        id:"34565867",
        title:"小菜",
        items:["酸辣土豆丝","干煸豆角","地三鲜"]
      },{
        id:"sdgfhjgkh",
        title:"凉菜",
        items:["花生米","拌黄瓜","皮蛋豆腐"]
      }]
    }
  },
}


// <div class="box"><em>about的文字<em><em>about的文字<em></div>
// const v_node = {
//   elementName: "div",
//   element: document.createElement(this.elementName),
//   attributes:{
//     className: "box",
//     id:"cont",
//     title:"这是div的title"
//   },
//   innerText:"about的文字",
//   innerHTML:"<em>about的文字<em>",
//   children:[{
//     id:"花生米"
//     elementName: "em",
//     element: document.createElement(this.elementName),
//     attributes:{},
//     innerText:"about的文字",
//     innerHTML:"about的文字"
//   },{
//     id:"火腿肠"
//     elementName: "em",
//     element: document.createElement(this.elementName),
//     attributes:{},
//     innerText:"about的文字",
//     innerHTML:"about的文字"
//   }]
// }

</script>